import React from 'react';
// import {Link} from 'react-router-dom'
import './widget.css';
import LeftNavigator from './left-navigator.js'

class TodoNavigator extends React.Component {

    onChange = (e)=>{
        var curKey = e.target.value;
        // console.log(curKey);
        var children = this.refs.navigator.refs.navigation.children;
        for(let i = 0; i < children.length; i++){
            var a = children[i].children[0];
            if(a.text.indexOf(curKey) >= 0 ){
                children[i].style.display = "block";
            }else{
                children[i].style.display = "none";
            }
        }
    }
    
    render() {
        return (
            <div className="todo-navigation">
                <input className="todoInput" type="text" placeholder="Please tap ..." onChange={this.onChange}></input>
                <LeftNavigator routerConfig={this.props.routerConfig} ref="navigator"/>
            </div>
        )
    }

}

export default TodoNavigator;